<template>
  <div class="paginationBar">
    <el-pagination
      :page-size="props.size"
      :current-page="props.page"
      :total="props.total"
      :page-sizes="[6, 12, 20, 28]"
      :pager-count="5"
      layout="prev, pager, next"
      background
      @sizeChage="sizeChange"
      @currentChange="currentChange"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  size: { type: Number, default: 12 },
  page: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  sizeChange: { type: Function },
  currentChange: { type: Function },
})
</script>

<style lang="less" scoped>
.paginationBar {
  width: calc(100% - 40px);
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
}
</style>
